import { forwardRef, Ref, useImperativeHandle, useCallback } from 'react';
import { TextWidget } from '@inbiz/react';
import { Button, Space } from 'antd';
import { InbizIcon, useEvents } from '@inbiz/utils';
import { defaultProps } from '../../designer/schema';
import api from './api';
import './style.less';

// export type ButtonTypes = 'primary' | 'default'
export type ButtonProps = {
  /**
   * @description 类型
   * @default primary
   */
  // type?: ButtonTypes;
  prefixCls?: string;
  disabled?: boolean;
  readOnly?: boolean;
  buttontype?: string;
  buttoncolor?: string; // 非驼峰写法老数据，驼峰写法新数据（兼容适配用，写法不对，请勿模仿）
  buttonColor?: string;
  textcolor?: string;
  buttonShowTyps: 'primary' | 'default' | 'dashed' | 'text' | 'link';
  title?: any;
  icon?: any;
  inbiz?: any;
  style: any;
  callBackEvents?: {
    onBeforeChange?: (v: string) => boolean;
  };
  emit?: {
    (type: 'onClick'): void;
  };
} & typeof defaultProps;

type IRef = Ref<ReturnType<typeof api>>;

const EformButton = forwardRef((props: ButtonProps, ref: IRef) => {
  const {
    prefixCls = 'inbiz-btn',
    buttontype,
    buttoncolor, // 解决老板本颜色展示问题(v6.0.0.0老版本属性)?
    buttonColor,
    textcolor, // 解决老板本字体颜色问题(v6.0.0.0老版本属性)
    title,
    icon, // v6.0.0.0版本含有icon.color属性
    inbiz,
    readOnly,
    disabled,
    buttonColorType,
    buttonShowTyps = 'primary',
    buttonBorder = 2, // 解决老板本显示的圆角问题?
    style,
  } = props;
  const [configEvents] = useEvents(props.callBackEvents, props.emit);
  useImperativeHandle(
    ref,
    () => ({
      ...api(configEvents),
    }),
    [],
  );

  const getButtonColorFunction = useCallback(() => {
    let resultStyle = {};
    switch (buttonShowTyps) {
      case 'primary':
        resultStyle = {
          // borderRadius: buttonBorder,
          borderRadius: style?.borderRadius,
          background:
            buttonColorType === 'system' || !buttonColorType
              ? 'var(--inbiz-color-primary)'
              : buttonColor,
          borderColor:
            buttonColorType === 'system' || !buttonColorType
              ? 'var(--inbiz-color-primary)'
              : buttonColor,
        };
        break;
      case 'text':
        resultStyle = {
          // borderRadius: buttonBorder,
          borderRadius: style?.borderRadius,
          color: buttonColorType === 'system' || !buttonColorType ? '' : buttonColor,
        };
        break;
      case 'link':
        resultStyle = {
          // borderRadius: buttonBorder,
          borderRadius: style?.borderRadius,
          color: buttonColorType === 'system' || !buttonColorType ? '' : buttonColor,
        };
        break;
      default:
        resultStyle = {
          // borderRadius: buttonBorder,
          borderRadius: style?.borderRadius,
          borderColor: buttonColorType === 'system' || !buttonColorType ? '' : buttonColor,
          color: buttonColorType === 'system' || !buttonColorType ? '' : buttonColor,
        };
        break;
    }
    return resultStyle;
  }, [buttonColorType, buttonShowTyps, buttonColor, style]);

  // 处理点击事件
  const handleClick = async () => {
    props.emit?.('onClick');
    switch (buttontype) {
      case 'submit':
        inbiz?.submit?.();
        break;
      case 'reset':
        inbiz?.reset?.();
        break;
      // 兼容以前版本提交按钮
      case '提交':
        inbiz?.submit?.();
        break;
      case '重置':
        inbiz?.reset?.();
        break;
      default:
        break;
    }
  };

  return (
    <div
      className="eformButton"
      style={{
        display: 'flex',
        justifyContent: 'center',
        height: 32,
        margin: style?.margin,
        // marginBottom: '22px',
      }}
    >
      <Button
        type={buttonShowTyps}
        className={buttonColorType === 'custom' && buttonColor ? 'notAntdStyle' : ''}
        disabled={readOnly || disabled}
        style={
          readOnly || disabled
            ? undefined
            : buttoncolor && !props.buttonShowTyps // 兼容老版本（以前拖拽的按钮）
              ? {
                background: buttoncolor,
                borderColor: buttoncolor,
                borderRadius: style?.borderRadius,
              }
              : getButtonColorFunction()
        }
        // type={'default'}
        onClick={handleClick}
      >
        {icon.type ? (
          <Space>
            <InbizIcon
              type={icon?.type}
              style={
                icon?.color && !props.buttonShowTyps // 兼容老版本（以前拖拽的按钮）
                  ? { color: icon?.color ? icon?.color : '#000', fontSize: icon?.size }
                  : { fontSize: icon?.size }
              }
            />
            <div style={textcolor && !props.buttonShowTyps ? { color: textcolor } : {}}>
              {title.status == true && <TextWidget>{title.value}</TextWidget>}
            </div>
          </Space>
        ) : (
          // 兼容老版本（以前拖拽的按钮）
          <div style={textcolor && !props.buttonShowTyps ? { color: textcolor } : {}}>
            {title.status == true && <TextWidget>{title.value}</TextWidget>}
          </div>
        )}
      </Button>
    </div>
  );
});

export default EformButton;
